<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>register</title>
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body style="background-image: url(../images/regist_bg.jpg);">

<div class="container" style="width: 800px; height: 700px; background-color: whitesmoke; border:2px wheat solid; margin:auto;">
    <div class="row">
        <div class="col-md-8" style="margin-left: 130px">
            <div >
                <h3 style="font-weight:bold; text-align: center;";>欢迎来到恒源世家</h3><br />
            </div>
            <form class="registerform",id="registerform">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username"  name="username" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="text" class="form-control" id="password" name="password" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="password1">请确认密码</label>
                    <input type="text" class="form-control" id="password1" name="password1" placeholder="请确认密码">
                </div>
                <div class="form-group">
                    <label for="lastname">姓名</label>
                    <input type="text" class="form-control" id="lastname" name="lastname" placeholder="姓名">
                </div>
                <div class="form-group">
                    <label >性别</label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                        男
                    </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                        女
                    </label>
                </div>
                <div class="form-group">
                    <label for="data">出生日期</label>
                    <input type="text" class="form-control" id="data" placeholder="出生日期">
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> 同意注册咱家会员
                    </label>
                </div>
                <div class="form-group">
                    <label class="red hidden col-md-9" id="errorLog">登录错误</label>
                </div>
                <button type="submit" class="btn btn-default">提交</button>
            </form>
        </div>
    </div>
</div>


<script src="jquery/jquery-3.4.1.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="jquery-validation/jquery.validate.js"></script>
<script src="jquery-validation/messages_zh.js"></script>
<script>
    $(document).ready(function(){
        $("#registerform").validate({
            rules:{
                username:{
                    required:true,
                    minlength:3
                },
                password:{
                    required: true,
                    minlength: 6
                },
                password1:{
                    required: true,
                    minlength: 6,
                    equalTo:"[name='password']"
                }
            },
            messages:{
                username:{
                    required:"用户名不能为空！",
                    minlength:"用户名不能少于3位！"
                },
                password:{
                    required: "密码不能为空！",
                    minlength: "密码不能少于6位！",
                },
                password1:{
                    required: "确认密码不能为空",
                    minlength: "确认密码不能少于6位",
                    equalTo:"确认密码不一致"
                }
            }
        });
        $("username").blur(function () {
            $.ajax({
                data:"post",
                url:"user/CheckUserNameExits",
                dataType:"json",
                data:{
                    u_name:$("#u_name").val(),
                },
                success:function (result) {
                    var errorCode = result.errorCode;
                    var msg = result.status;
                    if(errorCode==-1){
                        $("#errorLog").text(msg);
                        $("#errorLog").removeClass("hidden")
                    } else{
                        $("#errorLog").addClass("hidden")
                    }
                }
            })
        });
        $("password1").blur(function () {
            var password = $("#password").val();
            var password1 = $("#password1").val();
            if(password!=password1){
                $("#errorLog").text("两次输入的密码不一致");
                $("#errorLog").removeClass("hidden")
            } else {
                $("#errorLog").addClass("hidden")
            }
        });
    })
</script>
</body>
</html>
